<script>
    export default{

    }
</script>

<template>
  <div class="container">
    <div class="slider">
      <nav class="navgation">
        <router-link to="/company/about">关于公司</router-link>
        <router-link to="/company/contact">联系我们</router-link>
      </nav>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>
  
<style lang="scss">
  .container {
    display: flex; // 使用 Flexbox 布局
    min-height: 100vh; // 至少占满整个视口高度
    
    .slider {
      flex: 0 0 15%; // 左侧固定占15%宽度
      background-color: #f5f5f5; // 浅灰色背景
      padding: 20px;
      
      .navgation {
        display: flex;
        flex-direction: column;
        
        a {
          text-decoration: none;
          color: #333;
          padding: 10px 15px;
          margin-bottom: 10px;
          border-radius: 4px;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: #e0e0e0; // 悬停时背景变深
            color: #007bff; // 悬停时文字变蓝
          }
          
          // 激活状态样式
          &.router-link-exact-active {
            background-color: #007bff;
            color: white;
          }
        }
      }
    }
    
    .main {
      flex: 0 0 85%; // 右侧固定占85%宽度
      padding: 20px;
    }
  }
</style>